import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { List, Radio, Modal, Button } from 'antd-mobile'

const RadioItem = Radio.RadioItem;

// 宝宝性别选择
class GenderDialog extends Component {

    constructor(props, context) {
        super(props, context);
        let options = [{index:0,name:"女"},{index:1,name:"男"}];
        const genderList = localStorage.getItem('gender_list');
        if (genderList) {
            try {
                options = JSON.parse(genderList);
            } catch (error) {
            }
        }
        this.state = {
            gender: 0,
            open: false,
            options:options
        };
    }

    componentWillMount() {
        this.setState({
            gender: this.props.gender,
            open: this.props.open
        });
    }

    componentWillReceiveProps(nextProps, nextState) {
        this.setState({
            open: nextProps.open,
        });
    }

    handleCancel = () => {
        this.props.dismiss();
    };

    handleOk = () => {
        this.props.submit({ value: this.state.gender });
    };

    onChange = (value) => {
        this.setState({ gender: value });
    };
    onClose = key => () => {
        this.props.dismiss();
    }

    render() {
        return (
            <Modal
                popup
                visible={this.state.open}
                animationType="slide-up"
                onClose={this.onClose('')}
            >
                <List renderHeader={() => '性别选择'}>
                    {this.state.options.map(item => (
                        <RadioItem key={item.index} checked={this.state.gender === item.index} onChange={() => this.onChange(item.index)}>
                            {item.name}
                        </RadioItem>
                    ))}
                </List>
                <div style={{ display: "flex", alignItems: "center", width: '100%', justifyContent: 'center', marginTop: 20, marginBottom: 20 }}>
                    <Button type="primary" style={{ width: '80%' }}
                        onClick={this.handleOk}>完成</Button>
                </div>
            </Modal>
        );
    }
}

GenderDialog.propTypes = {
    dismiss: PropTypes.func.isRequired,
    submit: PropTypes.func.isRequired,
    gender: PropTypes.number.isRequired,
    open: PropTypes.bool.isRequired,
};

export default GenderDialog